{% extends 'base.html' %}

{% block title %}执行记录列表 - API场景组合测试工具{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col">
            <h2><i class="fas fa-play-circle"></i> 执行记录列表</h2>
        </div>
    </div>
    
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" id="search-input" class="form-control" placeholder="搜索记录...">
                <button class="btn btn-outline-secondary" type="button" id="search-btn">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </div>
        </div>
        <div class="col-md-6 text-end">
            <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <span id="filter-text">所有状态</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item filter-item" href="#" data-filter="all">所有状态</a></li>
                    <li><a class="dropdown-item filter-item" href="#" data-filter="SUCCESS">成功</a></li>
                    <li><a class="dropdown-item filter-item" href="#" data-filter="FAILED">失败</a></li>
                    <li><a class="dropdown-item filter-item" href="#" data-filter="RUNNING">运行中</a></li>
                    <li><a class="dropdown-item filter-item" href="#" data-filter="PENDING">等待中</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>场景</th>
                                    <th>环境</th>
                                    <th>状态</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="execution-list" data-executions="{{ executions|tojson }}">
                                {% for exec in executions %}
                                <tr>
                                    <td>{{ exec.id }}</td>
                                    <td>{{ exec.scene.name }}</td>
                                    <td>{{ exec.environment.name }}</td>
                                    <td>
                                        <span class="badge {% if exec.status == 'SUCCESS' %}bg-success{% elif exec.status == 'RUNNING' %}bg-primary{% else %}bg-danger{% endif %}">
                                            {{ exec.status }}
                                        </span>
                                    </td>
                                    <td>{{ exec.start_time }}</td>
                                    <td>{{ exec.end_time or '-' }}</td>
                                    <td>
                                        <a href="{{ url_for('execution.get_execution', exec_id=exec.id) }}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        {% if exec.status != 'RUNNING' %}
                                        <button class="btn btn-sm btn-success rerun-execution" data-id="{{ exec.id }}">
                                            <i class="fas fa-redo"></i> 重新执行
                                        </button>
                                        {% else %}
                                        <button class="btn btn-sm btn-warning cancel-execution" data-id="{{ exec.id }}">
                                            <i class="fas fa-stop"></i> 取消
                                        </button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="7" class="text-center">暂无执行记录</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <div id="pagination" class="d-flex justify-content-between align-items-center mt-3">
                        <div>
                            <span id="pagination-info">显示 {{ executions|length }} 条记录</span>
                        </div>
                        <nav>
                            <ul class="pagination">
                                <!-- 分页将通过JavaScript动态加载 -->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 重新执行
        $('.rerun-execution').click(function() {
            const execId = $(this).data('id');
            
            // 获取执行记录详情
            $.get(`/execution/${execId}`, function(data) {
                const execution = $(data).data('execution');
                
                // 创建新的执行请求
                $.ajax({
                    url: '/execution/',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        scene_id: execution.scene_id,
                        environment_id: execution.environment_id,
                        template_data_id: execution.template_data_id || null,
                        template_env_id: execution.template_env_id || null
                    }),
                    success: function(response) {
                        if (response.success) {
                            alert('场景执行已开始，执行ID: ' + response.execution_id);
                            // 跳转到执行详情页
                            window.location.href = '/execution/' + response.execution_id;
                        } else {
                            alert('执行失败: ' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请稍后重试');
                    }
                });
            });
        });
        
        // 取消执行
        $('.cancel-execution').click(function() {
            const execId = $(this).data('id');
            
            if (confirm('确定要取消此执行吗？')) {
                $.ajax({
                    url: `/execution/${execId}/cancel`,
                    type: 'POST',
                    success: function(response) {
                        if (response.success) {
                            alert('执行已取消');
                            location.reload();
                        } else {
                            alert('取消失败: ' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请稍后重试');
                    }
                });
            }
        });
        
        // 搜索功能
        $('#search-btn').click(function() {
            const searchText = $('#search-input').val().toLowerCase();
            
            $('#execution-list tr').each(function() {
                const sceneText = $(this).find('td:nth-child(2)').text().toLowerCase();
                const envText = $(this).find('td:nth-child(3)').text().toLowerCase();
                
                if (sceneText.includes(searchText) || envText.includes(searchText)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
        
        // 状态过滤
        $('.filter-item').click(function(e) {
            e.preventDefault();
            const filter = $(this).data('filter');
            $('#filter-text').text($(this).text());
            
            $('#execution-list tr').each(function() {
                if (filter === 'all') {
                    $(this).show();
                } else {
                    const status = $(this).find('td:nth-child(4) span').text().trim();
                    if (status === filter) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                }
            });
        });
    });
</script>
{% endblock %}